<template>
  <div style="height: 100%;">
    <div class="btbox btboxbg flexb fontz">
      {{$t('jy.newexchange')}}
    </div>
    <div class="flex tl leftTitle">
      <!-- <span>{{$t('jy.price')}}</span> -->
      <span>{{$t('order.direction')}}</span>
      <span>{{$t('jy.cje')}}(EOS)</span>
      <span>{{$t('order.time')}}</span>
    </div>
    <div class="overflowbox scrollbar" v-loading="loading">
      <div class="blist" v-if="latestData.length > 0">
        <a class="flex ltd" :class="{'ltdsell' : item.direction === 2}" target="_blank"
        v-for="(item, index) in latestData" :key="index"
        :href="`https://bloks.io/tx/${item.trxId}`"
        :title="$t('public.lookClick')">
          <span class="color-sl" v-if="item.direction === 1">{{$t('order.buy')}}</span>
          <span class="color-sr" v-else>{{$t('order.sell')}}</span>
          <span>{{toFixed(item.amount, 4)}}</span>
          <span class="color-fff">{{item.blockTime | dateFormatMonthHour}}</span>
          <!-- <span class="color-fff">···</span> -->
        </a>
      </div>
      <p class="center pt" v-else>{{hasDataForTable ? $t('myWallet.loadData') : $t('myWallet.noData')}}</p>
    </div>
    <a class="hidden" :href="ramDetailHref" target="_blank" ref="ramDetail"></a>
  </div>
</template>

<script>
// import axios from 'axios';
// import Io from '@/utils/socket/index';
// import { EosModel } from '@/utils/eos/index';
import { toFixed, toNonExponential } from '@/utils/validate';

export default {
  name: 'trading-right-bottom',
  data() {
    return {
      ticker: 'black_eos',
      latestData: [],
      loading: true,
      hasDataForTable: true,
      pageSize: -30,
      timerAction: null,
      ramDetailHref: '',
    };
  },
  props: {
    ramConfig: Object,
  },
  watch: {
  },
  components: {
  },
  created() {
  },
  mounted() {
    this.handleLatestTransaction();
  },
  beforeDestroy() {
    if (this.timerAction) {
      clearTimeout(this.timerAction);
    }
  },
  methods: {
    // 获取实时交易数据
    handleLatestTransaction() {
      const dataLenth = this.latestData.length;
      if (dataLenth > 30) {
        this.latestData.splice(30, dataLenth);
      }
      // const params = {
      //   account_name: 'eosio.ram',
      //   pos: -1,
      //   offset: this.pageSize,
      // };
      this.$http.get('eosRex/getLatestActions', {
        transformRequest: [(data, header) => {
          const headerFormat = header;
          // 对 data 进行任意转换处理
          headerFormat['Content-Type'] = 'application/json';
          return JSON.stringify(data);
        }],
      }).then((res) => {
        this.loading = false;
        if (res.code !== 0) return;
        // this.latestData = res.actionList.reverse();
        this.latestData = res.actionList;
      });
      if (this.timerAction) {
        clearTimeout(this.timerAction);
      }
      this.timerAction = setTimeout(() => {
        this.handleLatestTransaction();
      }, 8000)
    },
    // 查看具体详情TXID
    // amount 成交额
    handleOrderSuccessDetail(id) {
      this.ramDetailHref = `https://bloks.io/tx/${id}`;
      this.$nextTick(() => {
        this.$refs.ramDetail.click();
      });
      // const obj = { id, amount};
      // this.$emit('listenDetailRamAction', true, obj);
    },
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.tl {
  padding: 9.5px 0;
  span {
    flex: 1;
    text-align: center;
  }
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ximg {
  a {
    display: block;
    padding: 3px;
    margin: 0 5px 0 0;
    border: 1px solid rgba(0, 0, 0, 0);
    img {
      display: block;
      vertical-align: top;
    }

    &.active, &:hover {
      border: 1px solid rgba(0, 0, 0, .2);
    }
  }
}
.theme-1B1D27 {
  .btboxbg {
    background: $-topcolor2;
    color: $-main-color;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor;
  }
  .topc {
    background: $-topcolor3;
  }
  .ximg {
    a {
      &.active, &:hover {
        border: 1px solid #4e5b85;
      }
    }
  }
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }

  .leftTitle {
    color: #909399;
  }
}

.leftTitle, .blist .ltd {

  span {
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 10;
    white-space: nowrap;
      text-align: right;

    &:first-child {
      width: 38px;
      max-width: 38px;
      margin-left: 5px;
    }

    &:nth-child(2) {
      width: 90px;
      min-width: 90px;
      max-width: 90px;
    }

    &:nth-child(3) {
      width: 135px;
      max-width: 135px;
      margin-right: 5px;
    }
  }
}

.blist {
  padding: 1px 0 0 0;

  .ltd {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 27px;
    line-height: 27px;
    overflow: hidden;

    i.ambg {
      height: 99%;
      position: absolute;
      right: 0;
      // background: #67C269;
      z-index: 9;
      opacity: .3;
      top: 50%;
      transform: translateY(-50%);
      // background: linear-gradient(to right, RGBA(82, 177, 109, .2), RGBA(82, 177, 109, .4));
      background: RGBA(82, 177, 109, .35);
    }

    i.ambg1 {
      // background: linear-gradient(to right, RGBA(232, 18, 52, .15), RGBA(232, 18, 52, 0.3));
      background: RGBA(232, 18, 52, 0.2);
    }

    &:hover {
      cursor: pointer;
      span {
        font-weight: bold;
        color: #67C269
      }
    }

    &.ltdsell:hover {
      span {
        color: #EE1443
      }
    }

    span {
      &:first-child {
      }

      &:nth-child(2) {
      }

      &:nth-child(3) {
      }
    }
  }
}

.leftTitle {
  display: flex;

  span {
    &:first-child {
    }

    &:nth-child(2) {
      // width: 120px;
      // min-width: 120px;
      // max-width: 120px;
      // text-align: center;
    }

    &:nth-child(3) {
      // width: 40px;
      // min-width: 40px;
      // max-width: 40px;
    }

    &:last-child {
    }

    &:last-child:hover {
    }
  }
}

.overflowbox {
  height: calc(100% - 79px);
  overflow: auto;
}

.tccob {
  padding: 5px;

  strong {
    font-size: 20px;
  }

  span {
    vertical-align: bottom;
  }

  i {
  }
}

.color-999 {
  color: #999;
}
.color-sl {
  color: #67C269;
}
.color-sr {
  color: #EE1443;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}

.minibtn {
  .el-button {
    padding: 2px 5px;
  }
}
</style>

